<!DOCTYPE html>
<html>
<head>
	<title></title>
    <!-- 加载静态路径 -->
	{% load staticfiles %}
	<meta charset="utf-8">
    <!-- 引用Echarts -->
    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
	<script type="text/javascript" src="{% static 'echarts.js' %}"></script>
    <script type="text/javascript" src="{% static 'jquery-3.2.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js.js' %}"></script>
</head>
<body>
<div id='main'>
    <ul>
        <li>
        <!-- 评分统计 -->
        <div id="ratingnum"></div>
        </li>
        <!-- 这里用Echarts生成表格 -->
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ratingnum'));
            // 指定图表的配置项和数据
            var option = {
            title : {
                text: '豆瓣Top250评分统计',
                subtext: '数据来源于豆瓣',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['9.5分以上','9到9.5分','8.5到9分','8到8.5分','低于8分']
            },
            series : [
                {
                    name: '占总数的电影数量',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:{{nine1}}, name:'9.5分以上'},
                        {value:{{nine2}}, name:'9到9.5分'},
                        {value:{{eight1}}, name:'8.5到9分'},
                        {value:{{eight2}}, name:'8到8.5分'},
                        {value:{{other}}, name:'低于8分'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
        <li>
        <!-- 年份统计 -->
        <div id="age"></div>
        <script type="text/javascript">  
            // 2000年份统计
            var age = echarts.init(document.getElementById('age'));
            var option = {
            title : {
                text: '豆瓣Top250上映年份统计',
                subtext: '数据来源于豆瓣',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['2000年之后上映','2000年之前上映']
            },
            series : [
                {
                    name: '占总数的电影数量',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:'{{age1}}', name:'2000年之后上映'},
                        {value:'{{age2}}', name:'2000年之前上映'}
                       ],
                     itemStyle: {
                        emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            age.setOption(option);
        </script>
        </li>

        <li>
        <!-- 国家统计 -->
        <div id="country"></div>
        <script type="text/javascript">
            // 国家地区统计
            var country = echarts.init(document.getElementById('country'));
            var countrydata = {{ countryjson|safe }};
            var content=''

            var option = {
            title : {
                text: '豆瓣Top250国家地区比例',
                subtext: '数据来源于豆瓣',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series : [
                {
                    name: '国家地区',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
            };
            // 遍历字典内容
            for(i in countrydata){
               cdata = '{value:'+countrydata[i]+', name:"'+i+'"}'
               // 把获取到的值添加到JSON相应的位置
               option['legend']['data'].push(i)
               //通过eval把JSON字符串转为JSON对象
               option['series'][0]['data'].push(eval('('+cdata+')'))
            }
            // 在控制台中显示
            console.log(option['legend']['data'])
            console.log(option['series'][0]['data'])
            country.setOption(option);
        </script>
        </li>
        <li>
        <!-- 同年上映电影统计 -->
        <div id='agecount'></div>
        <script type="text/javascript">
            // 同年上映电影统计
            var agecount =echarts.init(document.getElementById('agecount'))
            var agejson = {{agejson|safe}}
            var option = {
            title : {
                text: '豆瓣Top250中同年上映电影数量',
                subtext: '数据来源于豆瓣',
                x:'center'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'电影数',
                    type:'bar',
                    barWidth: '60%',
                    data:[]
                }
            ]
            };
            for(i in agejson){
                option['xAxis'][0]['data'].push(i+'年')
                option['series'][0]['data'].push(eval('('+agejson[i]+')'))
            }
            agecount.setOption(option);
        </script>
        </li>
    </ul>
</div>
</body>
</html>
